Skip to content

feat: add Reviews modal popup triggered from navbar - #1158

Closed
tejask011 wants to merge 1 commit into
anushkasark08:mainfrom
tejask011:feat/reviews-modal-popup
Closed

feat: add Reviews modal popup triggered from navbar#1158
tejask011 wants to merge 1 commit into
anushkasark08:mainfrom
tejask011:feat/reviews-modal-popup

Conversation

@tejask011

Copy link
Copy Markdown
Contributor

📌 Summary

Implemented the Reviews section as a modal overlay instead of an inline section, matching the existing Reservation modal experience. Users can now view and submit reviews in a dedicated modal with improved accessibility and UX.


🎯 Related Issue

Fixes #1127


🛠️ Type of Change

  • Bug Fix

  • UI / UX Improvement


📋 What Changed?

  • Converted the Reviews section into a modal overlay.

  • Added review modal open/close functionality with backdrop, close button, and Escape key support.

  • Intercepted #reviews in smoothScroll() similar to the reservation modal.

  • Added automatic modal close after successful review submission.

  • Styled the reviews modal to match the existing reservation modal.

  • Fixed translation key from reviews.name_label to reviews.name.

  • Added data-i18n-placeholder for the name input.


🧪 Testing

  • Tested locally

  • Tested on Chrome

  • Tested responsive layouts

  • Verified no console errors

  • Existing functionality still works


📸 Screenshots

Before | After image

-- | --
Inline Reviews Section | Reviews displayed in a modal overlay


♿ Accessibility

  • Semantic HTML maintained

  • Keyboard navigation tested


📝 Additional Notes

The Reviews modal follows the same interaction pattern and styling as the existing Reservation modal for a consistent user experience.


✅ Checklist

  • I have read the project's CONTRIBUTING.md.

  • My branch follows the naming convention.

  • My commit messages follow the recommended format.

  • I have tested my changes.

  • I have linked the related issue.

  • This PR is focused on a single change.

- Add <section id='reviews'> as a modal overlay (not inline section)
- Reviews modal contains: existing reviews grid + submit form (name, star rating, review text)
- Clicking REVIEWS navbar/footer link opens modal instead of scrolling
- Intercept #reviews in smoothScroll() identical to #reservation pattern
- Add openReviewsModal / closeReviewsModal / setupReviewsModal functions
- Close on: X button, backdrop click, Escape key
- Auto-close modal 1.5s after successful review submission
- Add full CSS for .reviews-modal matching existing reservation modal style
- Fix translation key: reviews.name_label -> reviews.name (matches locale files)
- Add data-i18n-placeholder for name input

Fixes anushkasark08#1127
@netlify

netlify Bot commented Aug 3, 2026

Copy link
Copy Markdown

Deploy Preview for theelighthouse ready!

Name Link
🔨 Latest commit edc165d
🔍 Latest deploy log https://app.netlify.com/projects/theelighthouse/deploys/6a70db3f595ac40007e515d9
😎 Deploy Preview https://deploy-preview-1158--theelighthouse.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@anushkasark08

Copy link
Copy Markdown
Owner

@tejask011 some checks are failing recheck your codebase and raise a fresh pr .

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[FEATURE]:Review tab not working

2 participants